<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树形结构</title>
    <link rel="stylesheet" href="../../style/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<style>
    .tree-div{
        height: 400px;
        overflow: auto;
    }
    #addJob-btn {
        width: 85px;
        height: 38px;
        color: white;
        background: #f58f98;
        cursor: pointer;
    }
    #return_btn {
        width: 85px;
        height: 38px;
        color: white;
        background: #fd7e14;
        margin-left: 35px;
        cursor: pointer;
    }
    label{
        font-weight: bold;
        font-size: 20px;
    }
    input{
        width: 250px;
        height: 30px;
    }

</style>
<body>
    <label for="jobTitle">要添加的职位名称：</label>
    <input id="jobTitle">
    <button type="button" id="addJob-btn">保存</button>
    <button type="button" id="return_btn">返回</button>

<!--    zTree基于ul标签-->
<div class="tree-div">
    <ul id="treeDemo" class="ztree"></ul>
</div>


<script src="../../style/jquery-3.3.1.js"></script>
<script src="../../style/zTree_v3/js/jquery.ztree.all.js"></script>
<script>
    let zTreeObj;
    // jquery的加载函数
    $(function () {
        // 初始化zTree(dom,配置,数据 json格式)
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, selMenu());
    });


    let setting = {
        check: {
            enable: true,//true 、 false 分别表示 显示 、不显示 复选框或 单选框
            chkboxType: {"Y": "ps", "N": "ps"}
        },
        data: {
            key:{
                name:"menuName"//zTree 节点数据保存节点名称的属性名称  默认值："name"
            },
            simpleData: {
                enable: true, //true 、 false 分别表示 使用 、 不使用 简单数据模式
                idKey: "menuId",//节点数据中保存唯一标识的属性名称
                pIdKey: "menuPid",//节点数据中保存其父节点唯一标识的属性名称
                rootPId: 0        //用于修正根节点父节点数据，即 pIdKey 指定的属性值
            }
        }
    };

    /**
     * 查询菜单列表
     */
    function selMenu() {
        let zNodes;
        $.ajax({
            type: "post",
            url: "../../Menu/selMenuAll",
            dataType: "json",
            async: false,
            success: function (json) {
                zNodes = json.list;
            }
        });
        return zNodes;
    }

    //按钮返回页面
    $("#return_btn").click(function (){
        location.href="jobTitle.html";
    })
    /**
     * 保存按钮
     */
    $("#addJob-btn").click(function (){
        //参数为boolean值，当不写时，默认为true
        //返回值位Json数组，数组中为树的节点对象
        let nodeArray = zTreeObj.getCheckedNodes();
        let jobTitle = $("#jobTitle").val();
        //职位跟菜单有一个没添加则返回false
        if(jobTitle==""){
            alert("职业名称不能为空");
            return false;
        }else if(nodeArray==""){
            alert("职位菜单不能为空");
            return false;
        }
        $.ajax({
            type: "post",
            url: "../../JobController/addJob",
            data: {"jobTitle":jobTitle,"nodeArray":JSON.stringify(nodeArray)},
            dataType: "json",
            success:function (json){
                alert(json.message);
                location.href="jobTitle.html";
            }
        })
    })
</script>
</body>
</html>